<template>
  <view class="incomeMain">
	  <u-navbar
	    title="收益统计"
	    :background="{ background: '#fb4535' }"
	    title-color="#fff"
	    back-icon-color="#fb4535"
	  >
	    <view
	      class="uNavBarRight"
	      slot="right"
		  @click="terminalBankTab"
	      >终端返现
	  	</view>
	  </u-navbar>
    <view class="incomeBox">
      <view class="monthIncomeMain">
        <view class="monthIncomeBody">
          <view class="otherTotalBox">
            <view class="totalView">
              <view class="flex align-center"
                >累计分润(元)<view
                  >今日分润：{{
                    balance.today_frIncome
                      ? $tools.format(balance.today_frIncome)
                      : "0.00"
                  }}元</view
                ></view
              >
              <view
                ><text>￥</text
                >{{
                  balance.total_frIncome
                    ? $tools.format(balance.total_frIncome)
                    : "0.00"
                }}</view
              >
            </view>
          </view>
        </view>
        <!-- 月份筛选 -->
        <view class="selectView solid-top">
          <view class="selectYearsBox flex align-center justify-between">
            <view class="flex align-center">
              <picker
                mode="date"
                :value="year"
                :start="yearCurrent"
                fields="year"
                @change="bindDateChange"
              >
                <view class="uni-input">{{ year }}</view>
              </picker>
              年
              <u-icon
                class="xIcon"
                name="arrow-down-fill"
                color="#fff"
                size="24"
              ></u-icon>
            </view>
            <view class="noticeText flex align-center">
              <u-icon
                class="uIcon"
                name="error-circle"
                color="#fff"
                size="28"
              ></u-icon>
              <text>请勿频繁切换</text>
            </view>
          </view>
          <view class="selectMonthBox">
            <u-tabs
              :list="monthList"
              :is-scroll="true"
              :current="monthCurrent"
              bg-color="#fb4535"
              active-color="#fff"
              inactive-color="#fff"
              bar-height="10"
              @change="monthChange"
            ></u-tabs>
          </view>
        </view>

		<view class="title">
		   <view class="cu-bar">
		    <view class="action sub-title top">
		      <text class="text-xl text-bold text-orange">交 易 分 润</text>
		      <text class="bg-orange"></text>
		    </view>
		  </view>
		</view>
        <!-- 数据统计 -->
        <view class="incomeStatisticsMain">
                <view class="showPart flex align-center" @tap="$u.route({ url: '/pages/sytj/incomeList',params:{date:yearMouthDate} })">
					<image src="../../static/images/personTrade.png" mode="widthFix" class="topIcon"></image>
					<view class="part">
						<text>个人收益 (元)</text>
						<text>{{income1Data.personalIncome? $tools.format(income1Data.personalIncome): "0.00"}}</text>
					</view>
						<image src="../../static/images/perTradeRed.png" class="partImg"></image>
						<view class="detail">查看详情<u-icon class="uIcon" name="arrow-right" color="#fff" size="24"></u-icon></view>
				 </view>
                <view class="showPart flex align-center" @tap="$u.route({ url: '/pages/sytj/groupIncomeList' })">
					<image src="../../static/images/personTrade2.png" mode="widthFix" class="topIcon"></image>
					<view  class="part">
						<text>团队收益 (元)</text>
						<text>{{income1Data.groupIncome ? $tools.format(income1Data.groupIncome) : "0.00" }}</text>
					</view>
					<image src="../../static/images/perTradeYellow.png" class="partImg"></image>
					<view class="detail">查看详情<u-icon class="uIcon" name="arrow-right" color="#fff" size="24"></u-icon></view>
                </view>
				</view>
<!--                <view class="title">
                  <view class="cu-bar">
                    <view class="action sub-title top">
                      <text class="text-xl text-bold text-orange">激 活 收 益</text>
                      <text class="bg-orange"></text>
                    </view>
                  </view>
                </view> -->

<!--            <view @tap="$u.route({ url: '/pages/sytj/incomeList' })">
                    <text>{{income2Data.personalIncome? $tools.format(income2Data.personalIncome): "0.00"}}</text>
                    个人返现(元)
                    <view class="flex align-center">查看详情<u-icon class="uIcon" name="arrow-right" color="#fb4535" size="24"></u-icon
                    ></view>
                  </view>
                  <view@tap="$u.route({ url: '/pages/sytj/groupIncomeList' })">
                    <text>{{income2Data.groupIncome ? $tools.format(income2Data.groupIncome) : "0.00"}}</text>
                    团队返现(元)
                    <view class="flex align-center">查看详情<u-icon class="uIcon" name="arrow-right" color="#fb4535" size="24"></u-icon
                    ></view>
                  </view> -->
        <!--  <view class="incomeStatisticsMain">
          <view class="incomeStatisticsBox">
            <view class="pieMain">
              <view class="pieBox">
                <view class="title">维度一收益占比</view>
                <view class="charts-box"
                  ><qiun-data-charts type="pie" :chartData="pieData1"
                /></view>
                <view class="picList">
                  <view
                    class="item flex align-center justify-between solid-bottom"
                  >
                    <view>交易收益</view>
                    <view>
                      <text>{{
                        income1Data.tradeIncome
                          ? income1Data.tradeIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                  <view
                    class="item flex align-center justify-between"
                  >
                    <view>激活收益</view>
                    <view>
                      <text>{{
                        income1Data.activeIncome
                          ? income1Data.activeIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                </view>
              </view>
            </view>
             <view class="pieMain">
              <view class="pieBox">
                <view class="title">维度二收益占比</view>
                <view class="charts-box"
                  ><qiun-data-charts type="pie" :chartData="pieData2"
                /></view>
                <view class="picList">
                  <view
                    class="item flex align-center justify-between solid-bottom"
                  >
                    <view>个人收益</view>
                    <view>
                      <text>{{
                        income2Data.personalIncome
                          ? income2Data.personalIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                  <view
                    class="item flex align-center justify-between"
                  >
                    <view>团队收益</view>
                    <view>
                      <text>{{
                        income2Data.groupIncome
                          ? income2Data.groupIncome
                          : "0.00"
                      }}</text
                      >元
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view> -->
      </view>
    </view>
    <u-toast ref="uToast" />
    <!-- 底部导航 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      year: "",
      month: "",
      yearCurrent: "2018",
      monthCurrent: 0,
      monthList: [
        {
          name: "1月",
        },
        {
          name: "2月",
        },
        {
          name: "3月",
        },
        {
          name: "4月",
        },
        {
          name: "5月",
        },
        {
          name: "6月",
        },
        {
          name: "7月",
        },
        {
          name: "8月",
        },
        {
          name: "9月",
        },
        {
          name: "10月",
        },
        {
          name: "11月",
        },
        {
          name: "12月",
        },
      ],
      yearMouthDate: "",
      balance: {
        today_income: "0.00",
        total_income: "0.00",
      },
      tradeIncome:{
        personalIncome:"0.00",
        groupIncome:"0.00"
      },
      income1Data: {
        tradeIncome: "0.00",
        activeIncome: "0.00",
      },
      income2Data: {
        personalIncome: "0.00",
        groupIncome: "0.00",
      },
      // pieData1: {
      //   series: [
      //     {
      //       data: [],
      //     },
      //   ],
      // },
      // pieData2: {
      //   series: [
      //     {
      //       data: [],
      //     },
      //   ],
      // },
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
  },
  onShow() {
    let isAuth = uni.getStorageSync("loginInfo").isCert;
    if (isAuth == 1) {
      this.withdrawMoney();
      this.getYearsMonth();
    }else{
       this.$refs.uToast.show({
          title: "请先进行实名认证",
          type: "error",
          url: "/pages/wd/authName",
        });
    }
  },
  onPullDownRefresh() {
    this.GetYearMouthDate();
	  this.withdrawMoney();
    this.getYearsMonth();
  },
  methods: {
    monthChange(index) {
      this.monthCurrent = index;
      this.page = 1;
      let $month = index + 1;
      if ($month < 10) {
        $month = "0" + $month;
      }
      this.month = $month;
      this.GetYearMouthDate();
    },
    bindDateChange: function (e) {
      this.year = e.target.value;
      this.monthCurrent = 0;
      this.month = "01";
      this.GetYearMouthDate();
    },

    // 获取当前年月
    getYearsMonth() {
      let date = new Date();
      let currentYear = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      currentMonth = currentMonth < 10 ? "0" + currentMonth : currentMonth;
      // let mydate = currentYear.toString() + "-" + currentMonth.toString();
      // 当月
      this.monthCurrent = date.getMonth();
      this.year = currentYear;
      this.month = currentMonth;
      this.yearMouthDate = this.year + "-" + this.month;
      this.GetYearMouthDate();
    },
    // 获取总计展示
    withdrawMoney() {
      this.$u.api.getUserIncome().then((res) => {
        if (res.status == 200) {
          this.balance = res.result;
        }
      })
	  .catch((res) => {
	    if (res.errMsg == "request:fail timeout") {
	      this.$u.toast("请求超时，请重试!");
	    } else if (res.errMsg == "request:fail") {
	      this.$u.toast("请求失败，请重试");
	    } else {
	       this.$u.toast("请求失败，请重试");
	    }
	    this.$loading(false);
	  });
    },
    GetYearMouthDate() {
      this.yearMouthDate = this.year + "-" + this.month;
      this.getIncome1Data();
      // this.getIncome2Data();
    },
    getIncome1Data() {
      this.$u.api
        .tradeIncome({ searchMonth: this.yearMouthDate })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.income1Data = datas;
            // let tradeIncome = datas.tradeIncome ? datas.tradeIncome : 0;
            // let activeIncome = datas.activeIncome ? datas.activeIncome : 0;
            // let temporaryPieData = {
            //   series: [
            //     {
            //       data: [
            //         { name: "交易收益", value: tradeIncome },
            //         { name: "激活收益", value: activeIncome },
            //       ],
            //     },
            //   ],
            // };
            // setTimeout(() => {
            //   this.pieData1 = temporaryPieData;
            // });
          }
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
		  if (res.errMsg == "request:fail timeout") {
		    this.$u.toast("请求超时，请重试!");
		  } else if (res.errMsg == "request:fail") {
		    this.$u.toast("请求失败，请重试");
		  } else {
		     this.$u.toast("请求失败，请重试");
		  }
		  this.$loading(false);
		});
    },
    getIncome2Data() {
      this.$u.api
        .getIncome2({ searchMonth: this.yearMouthDate })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.income2Data = datas;
            // let personalIncome = datas.personalIncome
            //   ? datas.personalIncome
            //   : 0;
            // let groupIncome = datas.groupIncome ? datas.groupIncome : 0;
            // let temporaryPieData = {
            //   series: [
            //     {
            //       data: [
            //         { name: "个人收益", value: personalIncome },
            //         { name: "团队收益", value: groupIncome },
            //       ],
            //     },
            //   ],
            // };
            // setTimeout(() => {
            //   this.pieData2 = temporaryPieData;
            // });
          }
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
		  if (res.errMsg == "request:fail timeout") {
		    this.$u.toast("请求超时，请重试!");
		  } else if (res.errMsg == "request:fail") {
		    this.$u.toast("请求失败，请重试");
		  } else {
		     this.$u.toast("请求失败，请重试");
		  }
		  this.$loading(false);
		});
    },

	terminalBankTab(){
		this.$u.route({
			url: 'pages/sytj/zdfx',
			params: {
				yearDate:this.yearMouthDate
			},
		})
	},
  },
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
	}
	.uNavBarRight {
	  padding-right: 30rpx;
	  color: #fff;
	}
.monthIncomeMain {
  position: relative;

  .circleView {
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    position: absolute;
    top: -100rpx;
    right: -120rpx;
    border: 50rpx solid rgba(253, 149, 140, 0.5);
    z-index: 9;
  }

  .monthIncomeHeader {
    background-color: #fb4535;
    padding: 50rpx 40rpx;

    .monthTotalIcomeBox {
      position: relative;
      z-index: 99;

      view {
        font-weight: bold;
        color: #fff;

        &:nth-of-type(1) {
          font-size: 38rpx;
          padding-left: 5rpx;

          text {
            font-size: 38rpx;
            padding-right: 10rpx;
          }
        }

        &:nth-of-type(2) {
          font-size: 38rpx;
          padding-top: 20rpx;

          text {
            font-size: 80rpx;
            font-family: "numberFont";
            letter-spacing: 5rpx;
            padding-left: 10rpx;
          }
        }
      }
    }
  }

  .monthIncomeBody {
    position: relative;
    background-color: #fb4535;

    &::before {
      content: "";
      width: 100%;
      height: 8rpx;
      background: url("../../static/images/lineImg.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: -4rpx;
      right: 0;
      z-index: 10;
    }

    .iconBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: 40rpx;
      background-color: #fff;
      box-shadow: 0 0 10rpx #f76b6c;
      border-radius: 50%;
      z-index: 99;

      .xIcon {
        font-weight: bold;
      }
    }

    .otherTotalBox {
      padding: 30rpx;
      .totalView {
        color: #fff;
        view {
          &:first-of-type {
            font-size: 32rpx;
            line-height: 40rpx;
            view {
              margin-left: 20rpx;
              background: rgba(0, 0, 0, 0.1);
              height: 40rpx;
              line-height: 40rpx;
              padding: 0 26rpx 0 20rpx;
              border-radius: 50rpx;
              font-size: 22rpx;
              position: relative;
              top: 1rpx;
            }
          }
          &:nth-of-type(2) {
            padding-top: 18rpx;
            font-size: 60rpx;
            font-family: "numberFont";
            text {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
}

.selectView {
  background-color: #fb4535;

  .selectYearsBox {
    padding: 20rpx 40rpx 0rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #fff;
    position: relative;
    z-index: 9;

    .xIcon {
      margin-left: 10rpx;
    }

    .uIcon {
      margin-right: 10rpx;
    }

    .noticeText {
      font-size: 28rpx;

      text {
        position: relative;
        top: -2rpx;
      }
    }
  }

  .selectMonthBox {
    padding: 0 18rpx 0rpx;
    background-color: #fb4535;
  }
}
.title {
	margin: 20rpx 0 0 10rpx;
  }


.incomeStatisticsMain{
	padding: 0 30rpx;
	margin-top: 40rpx;
	.showPart{
		position: relative;
		margin-bottom: 60rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 14rpx;
		box-shadow: 3rpx 5rpx 8rpx #ccc;

		.part{
			display: flex;
			flex-direction: column;
			margin-left: 80rpx;
			color: #000;
			font-size: 26rpx;
			font-family: numberFont;
			padding-top: 10rpx;
			&>text:last-child{
				padding-top: 10rpx;
				font-size: 40rpx;
				color:#fb4535;
				letter-spacing: 2rpx;
			}
		}

		.topIcon{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: -30rpx;
			left: 40rpx;
		}

		.partImg{
			width: 300rpx;
			height: 180rpx;
			position: absolute;
			top: 9rpx;
			right: 10rpx;
		}

		.detail{
			position: absolute;
			right: 40rpx;
			color: #fff;
			font-weight: 700;
			letter-spacing: 3rpx;
			font-size: 30rpx;
		}
	}
}
</style>
